<template>
  <div class="index" :style="{ paddingTop: navBarHeight + 'px' }">
    <div class="top-fixed-bar">
      <uni-status-bar />
      <div class="flex-box">
        <a
          hover-class="none"
          class="avatar-box"
          url="/shop/productList/searchProdcut/searchProdcut"
        >
          <img
            src="https://media.wxcwy.com/mini/images/searchicon_p@2x.png"
            class="search-icon"
            alt=""
          />
          <text class="search-t">搜索商品</text>
        </a>
        <div class="name-t van-ellipsis">
          美时汇商城
        </div>
        <div class="avatar-box"></div>
      </div>
    </div>
    <swiper
      class="banner-swiper"
      :interval="3000"
      :duration="1000"
      autoplay
      @change="swiperChange"
      circular="true"
      previous-margin="20rpx"
      next-margin="20rpx"
    >
      <swiper-item
        class="item-wrapper"
        v-for="(item, index) in pageData.header"
        :key="index"
      >
        <view
          class="swiper-item"
          @click="toDetail(item)"
          :class="[index == swiperCurrent ? 'active' : 'quiet']"
        >
          <img
            mode="aspectFill"
            :src="item.cover_picture"
            class="img-size-100 banner"
          />
        </view>
      </swiper-item>
    </swiper>

    <div class="main-wrapper">
      <div class="menu-box">
        <div class="title">
          <text>美粉币</text>
          <text class="number">{{ userInfo.amount_name }}</text>
        </div>
        <div class="list">
          <div
            @click="toLink('/pages/paymentCode/paymentCode?type=1')"
            class="item item1"
          >
            <div class="pic"></div>
            <div class="txt">消费付款码</div>
          </div>
          <div class="item item2" @click="toLink('/about/recharge')">
            <div class="pic"></div>
            <div class="txt">立即充值</div>
          </div>
          <div @click="toLink('/shop/product/index?merchId=1')" class="item item3">
            <div class="pic"></div>
            <div class="txt">自营商城</div>
          </div>
<!--          <div @click="toLink('/pages/coupon/coupon')" class="item item4">-->
<!--            <div class="pic"></div>-->
<!--            <div class="txt">我的卡券</div>-->
<!--          </div>-->
          <div @click="toLink('/about/coupon/coupon')" class="item item4">
            <div class="pic"></div>
            <div class="txt">我的优惠券</div>
          </div>
        </div>
      </div>

<!--      <div class="news-box">-->
<!--        <div class="left"></div>-->
<!--        <div class="right">-->
<!--          <div class="item">-->
<!--            <div class="tips">最新</div>-->
<!--            <div class="tips">收益</div>-->
<!--          </div>-->
<!--          <swiper-->
<!--            class="news-swiper"-->
<!--            :circular="true"-->
<!--            :vertical="true"-->
<!--            :interval="interval"-->
<!--            autoplay-->
<!--            next-margin="40rpx"-->
<!--          >-->
<!--            <swiper-item v-for="(item, index) in pageData.dynamic" :key="index">-->
<!--              <div class="txt">-->
<!--                <text class="name">{{ item.user_name }}</text>-->
<!--                <text class="number">{{ item.amount }}</text>-->
<!--                <text class="time">{{ item.time }}</text>-->
<!--              </div>-->
<!--            </swiper-item>-->
<!--          </swiper>-->

<!--          &lt;!&ndash; <div class="item">-->
<!--                <div class="tips">最新</div>-->
<!--                <div class="txt">-->
<!--                  <text class="name">张**赚取</text>-->
<!--                  <text class="number">30美粉币</text>-->
<!--                  <text class="time">{{ index }}分钟前</text>-->
<!--                </div>-->
<!--              </div> &ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <div
      class="hot-list"
      v-for="(item, index) in pageData.goods_banner"
      :key="index"
    >
      <a hover-class="none" :url="'/shop/productList/productList?bannerId=' + item.id + '&bannerName=' + item.label" class="banner">
        <img :src="item.url" class="img-size-100" />
      </a>

      <div class="list-box">
        <a
          :url="'/shop/productDetails/productDetails?id=' + product.product.id"
          v-for="(product, index) in item.data"
          hover-class="none"
          :key="index"
        >
          <div class="item">
            <div>
              <div class="pic-box">
                <img :src="product.product.cover_picture" class="img" />
                <text class="tips" v-if="product.product.promote_tag">{{
                  product.product.promote_tag
                }}</text>
                <text class="inventory" v-if="product.product.is_sold_out == 1"
                  >售罄
                  <!-- <text class="triangle-box"></text> -->
                </text>
              </div>
            </div>
            <div style="position: relative;width: 100%;">
              <div class="title">
                {{ product.product.title }}
              </div>
              <div class="tag">
                <div class="spike" v-if="product.product.special_tag">
                    {{ product.product.special_tag }}
                  </div>
              </div>
              <div class="price-info">
                <div class="left">
                  <div class="present">
                    <text>美粉币</text>
                    <text class="number">{{
                      product.product.lowest_price_name
                    }}</text>
                  </div>
                  <div class="old" v-if="product.product.virtual_price">
                    {{ product.product.virtual_price }}
                  </div>
                </div>
                <div class="right" v-if="product.product.virtual_sales">
                  销量 {{ product.product.virtual_sales }}
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>

    <div class="follow-wrapper" v-if="showTips">
      <div class="main-box">
        <div class="main">
          <text class="close-btn" @click="onCloseTips"></text>
          <text>关注微信公众号，实时掌握优惠讯息</text>
          <a
            :url="
              pageData.wechat_focus
                ? `/pages/webview/webview?url=${pageData.wechat_focus}`
                : '/pages/index/officiaGuidel'
            "
            hover-class="none"
            class="btn"
            >去关注</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import checkLogin from "@/common/check-login.js";
import uniStatusBar from "@dcloudio/uni-ui/lib/uni-status-bar/uni-status-bar.vue";
import { mapState, mapMutations } from "vuex";
import Share from "@/common/share";
export default {
  components: {
    uniStatusBar
  },
  data() {
    return {
      interval: 2000,
      duration: 1000,
      navBarHeight: 0,
      swiperCurrent: 0,
      pageData: {},
      tipsExTime: uni.getStorageSync("INDEX_TIPS_EX_TIME")
    };
  },
  computed: {
    ...mapState(["userInfo", "token"]),
    showTips() {
      return this.userInfo.is_focus_wechat == 0 && new Date() > this.tipsExTime;
    }
  },
  onLoad() {
    this.navBarHeight = uni.getSystemInfoSync().statusBarHeight + 44;
    this.getIndex();
    Share.getShareCode();
  },
  onShow() {
    this.getBalance();
  },
  onShareAppMessage(res) {
    return Share.getShareId({
      from: res.from,
      shareLink: `pages/index/index`,
      shareTitle: "万千好物一站享"
    });
  },
  async onPullDownRefresh() {
    await this.getBalance();
    await this.getIndex();
    wx.stopPullDownRefresh();
  },
  methods: {
    ...mapMutations(["changUserInfo"]),
    getBalance() {
      return this.$api.getBalance().then(res => {
        if (res.code == 200) {
          this.changUserInfo(res.data);
        }
      });
    },
    toDetail(data) {
      let { type, url, id } = data;
      let _url =
        type == 1
          ? url || "/pages/articleDetails/articleDetails?id=" + id
          : `/pages/webview/webview?url=${url}`;
      uni.navigateTo({ url: _url });
    },
    toLink(path) {
      checkLogin(path);
    },
    onCloseTips() {
      let exTime = new Date().setHours(24, 0, 0, 0);
      this.tipsExTime = exTime;
      uni.setStorage({
        key: "INDEX_TIPS_EX_TIME",
        data: exTime
      });
    },
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    getIndex() {
      return this.$api.getIndex().then(res => {
        if (res.code == 200) {
          this.pageData = res.data;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.index {
  background: #f3f3f3;
  .top-fixed-bar {
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99999;
    padding: 0 20rpx;
    .flex-box {
      display: flex;
      align-items: center;
      height: 44px;
      .avatar-box {
        flex: 1;
        height: 54rpx;
        // border-radius: 50%;
        // overflow: hidden;
        margin-right: 10rpx;
        display: flex;
        align-items: center;
        .search-icon {
          height: 40rpx;
          width: 40rpx;
          flex: 0 0 40rpx;
        }
        .search-t {
          font-size: 26rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
      .name-t {
        font-size: 32rpx;
        color: #333;
        line-height: 42rpx;
        font-weight: 500;
        flex: 1;
        text-align: center;
      }
    }
  }
  .img-size-100 {
    width: 100%;
    height: 100%;
  }
  .banner-swiper {
    background: #fff;
    padding-top: 14rpx;
    height: 280rpx;
    .item-wrapper {
      display: flex;
      overflow: hidden;
      align-items: center;
    }
    .banner {
      will-change: transform;
    }
    .swiper-item {
      // background-color: #dedede;
      border-radius: 20rpx;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: all 0.5s;
      transform-origin: center center;
      margin: 0 10rpx;
      &.active {
        // transform: scale(1);
        transform: scaleY(1);
      }
      &.quiet {
        transform: scaleY(0.9);
      }
    }
  }
  .main-wrapper {
    background: #fff;
    padding: 0 30rpx;
    .menu-box {
      padding: 20rpx 0;
      overflow: hidden;
      border-bottom: 1px solid #e7e7e7;
      .title {
        height: 45rpx;
        line-height: 45rpx;
        font-size: 32rpx;
        color: #333333;
        background: url(https://media.wxcwy.com/mini/images/shb_icon@2x.png) no-repeat left center;
        margin-left: 20rpx;
        background-size: 40rpx 40rpx;
        padding-left: 50rpx;
        .number {
          margin-left: 20rpx;
          color: #ff7900;
          font-size: 44rpx;
        }
      }
    }
    .list {
      margin-top: 30rpx;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      padding: 0 25rpx;
      .item {
        display: block;
        text-align: center;
        overflow: hidden;
        .pic {
          width: 60rpx;
          height: 60rpx;
          margin: 0 auto 6rpx;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .txt {
          font-size: 24rpx;
          color: #666;
        }
        &.item1 {
          .pic {
            background-image: url(https://media.wxcwy.com/mini/images/ewm_icon@2x.png);
          }
        }
        &.item2 {
          .pic {
            //background-image: url(https://media.wxcwy.com/mini/images/share_icon@2x.png);
            background-image: url(https://media.wxcwy.com/mini/images/recharge_icon@2x.png);
          }
        }
        &.item3 {
          .pic {
            //background-image: url(https://media.wxcwy.com/mini/images/vip_icon@2x.png);
            background-image: url(https://media.wxcwy.com/mini/images/mall_icon@2x.png);
          }
        }
        &.item4 {
          .pic {
            background-image: url(https://media.wxcwy.com/mini/images/kaquan_icon@2x.png);
          }
        }
      }
    }
    .news-box {
      padding: 20rpx 0;
      overflow: hidden;
      display: flex;
      height: 80rpx;
      .left {
        flex: 0 0 100rpx;
        height: 100%;
        padding-right: 20rpx;
        margin-right: 20rpx;
        border-right: 1px solid #e7e7e7;
        background: url(https://media.wxcwy.com/mini/images/shihuidongtai_icon@2x.png) no-repeat left
          center;
        box-sizing: border-box;
        background-size: auto 100%;
      }
      .right {
        flex: 1;
        height: 100%;
        overflow-x: hidden;
        color: #666666;
        font-size: 26rpx;
        line-height: 38rpx;
        display: flex;
        .tips {
          background-color: #d8edff;
          font-size: 24rpx;
          height: 32rpx;
          line-height: 32rpx;
          width: 84rpx;
          text-align: center;
          border-radius: 8rpx;
          margin-right: 16rpx;
          margin-bottom: 10rpx;
          color: #028dff;
        }

        .news-swiper {
          height: 80rpx;
          flex: 1;
          .name {
            color: #666666;
          }
          .time {
            color: #999999;
          }
          .number {
            color: #028dff;
          }
        }
      }
    }
  }
  .follow-wrapper {
    height: 128rpx;
    .main-box {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 128rpx;
      background: #fff;
      padding: 0 30rpx 20rpx;
      box-sizing: border-box;
      .main {
        height: 88rpx;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50rpx;
        box-sizing: border-box;
        padding: 0 12rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;
        font-size: 26rpx;
        position: relative;
        .btn {
          width: 160rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: linear-gradient(
            90deg,
            rgba(26, 178, 255, 1) 0%,
            rgba(2, 141, 255, 1) 100%
          );
          border-radius: 32rpx;
        }
      }
      .close-btn {
        position: absolute;
        left: 0;
        top: -24rpx;
        width: 48rpx;
        height: 48rpx;
        background: url(https://media.wxcwy.com/mini/images/tips_close_icon@2x.png) no-repeat left
          center;
        background-size: 100% 100%;
      }
    }
  }
  .hot-list {
    margin-top: 20rpx;
    background: #fff;
    color: #333;
    font-size: 26rpx;
    padding: 30rpx;
    padding-bottom: 0rpx;
    padding-top: 20rpx;
    overflow: hidden;
    .img-size-100 {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .banner {
      display: block;
      height: 165rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
    .list-box {
      margin: 14rpx 0;
      overflow: hidden;
      .item {
        display: flex;
        margin-top: 20rpx;
        .pic-box {
          margin-right: 20rpx;
          .img{
            width: 240rpx;
            height: 240rpx;
            border-radius: 8rpx;
          }
          position: relative;
          .inventory {
            width: 100%;
            color: #fff;
            font-size: 24rpx;
            line-height: 44rpx;
            background: #9b9b9b;
            position: absolute;
            left: 0;
            bottom: 8rpx;
            text-align: center;
            border-bottom-left-radius: 8rpx;
            border-bottom-right-radius: 8rpx;
            .triangle-box {
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 36rpx 0 0 20rpx;
              border-color: transparent transparent transparent #9b9b9b;
              position: absolute;
              top: 0;
              right: -20rpx;
            }
          }
          .tips {
            position: absolute;
            top: 20rpx;
            left: 0;
            height: 34rpx;
            line-height: 34rpx;
            background: #ee4130;
            color: #fff;
            border-radius: 4rpx;
            padding: 0 20rpx;
            font-size: 24rpx;
          }
        }
        .title {
          line-height: 40rpx;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-size: 28rpx;
        }
        .tag{
          position: absolute;
          bottom:70rpx;
          .spike {
            width: fit-content;
            color: #ff7900;
            border: 1px solid #ff7900;
            border-radius: 6rpx;
            padding: 0 8rpx;
            margin-right: 20rpx;
            box-sizing: border-box;
          }
        }
        .price-info {
          height: 45rpx;
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 12rpx;
          width: 100%;
          .left {
            display: flex;
            align-items: center;
            color: #ff7900;
            .number {
              font-size: 40rpx;
            }
            .old {
              color: #9f9f9f;
              text-decoration: line-through;
              margin-left: 11rpx;
            }
          }
          .right {
            color: #9f9f9f;
            font-size: 24rpx;
            line-height: 48rpx;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
